#testimonials {
    $width-size: 70vw;
    
    background-color: $bg-color;
    margin: px-to-rem(200px) 0;
    position: relative;
    
    &::before, &::after {
        content: "";
        height: 12vh;
        background-color: $bg-color;
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        border-right: $width-size solid white;
    }
    
    &::before {
        clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
        bottom: 100%;
    }
    
    &::after {
        clip-path: polygon(0 100%, 100% 0, 100% 0, 0 0);
        top: 100%;
    }
    
    #testimonials-bg {
        position: absolute;
        width: $width-size;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: white;
    }
    
    
    article {
        $color: #0d77bb;
        $alt-color: #184a6a;
        
        position: relative;
        z-index: 20;
        padding: px-to-rem(108px) 0 px-to-rem(76px);
        text-align: center;
        
        h2 {
            text-transform: uppercase;
            font-size: px-to-rem(36px);
            margin-bottom: px-to-rem(24px);
        }
        
        
        h5 {
            font-size: px-to-rem(24px);
            
            span {
                font-size: px-to-rem(36px);
                color: $color;
            }
        }
        
        #reviews {
            
            display: flex;
            color: white;
            margin: px-to-rem(32px) px-to-rem(24px);
            
            .review {
                background-color: $color;
                margin: 0 px-to-rem(18px);
                padding: px-to-rem(24px);
                
                .reviewer-details {
                    display: flex;
                    align-items: center;
                    
                    figure {
                        border-radius: 50%;
                        background-size: cover;
                        height: px-to-rem(100px);
                        width: px-to-rem(100px);
                    }
                    
                    .details {
                        margin-left: px-to-rem(18px);
                        letter-spacing: 1px;
                        
                        .name {
                            font-size: px-to-rem(18px);
                            text-transform: uppercase;
                            margin-bottom: px-to-rem(6px);
                        }
                        
                        .from {
                            font-size: px-to-rem(14px);
                            text-align: left;
                        }
                    }
                }
                
                .review-text {
                    font-size: px-to-rem(16px);
                    margin-top: px-to-rem(14px);
                    text-align: left;
                    line-height: 240%;
                }
            }
            
            .review:nth-of-type(1) figure { background-image: url(get-image("face-1.jpg")); }
            .review:nth-of-type(2) figure { background-image: url(get-image("face-2.jpg")); }
            .review:nth-of-type(3) figure { background-image: url(get-image("face-3.jpg")); }
            
            .review:nth-of-type(2) { background-color: $alt-color };
        }
        
        
        a {
            display: block;
            text-align: center;
            color: $color;
            margin-top: px-to-rem(8px);
            
            &:hover {
                opacity: .7;
            }
        }
    }
}